<template>
  <div class="linkage">
    <div class="content-box">
      <div class="nav" ref="nav">
        <div
          @click="fnNav(index, $event)"
          v-for="(item, index) in btnList"
          :key="item.id"
          :class="now == index ? 'nav-list ac' : 'nav-list'"
        >
          {{ item.val }}
        </div>
      </div>
      <div class="content" ref="content" @scroll="contentScroll">
        <div class="content-list" v-for="(cont, index) in contList" :key="index">
          <!-- <div class="title">{{ cont.val }}</div> -->
          <div class="menu_middle_top">
            <span>{{cont.val}}</span>
            <el-button type="primary" round>查看</el-button>
          </div>
          <div class="menu_middle_por">
            <p>
              <span>联系人</span>
              <span>联系方式</span>
            </p>
            <p>
              <span>{{cont.peo}}</span>
              <span>{{cont.tell}}</span>
            </p>
          </div>
            <div class="menu_middle_text">
            <p class="one">
              日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论
            </p>
            <p class="two">
              日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      now: 0,
      listBoxState: true, //点击导航栏时，暂时停止监听页面滚动
      btnList: [
        {
          id: "btn0",
          val: "日冕行星际理论",
        
        },
        {
          id: "btn1",
          val: "行星际激波计算",
        },
        {
          id: "btn2",
          val: "磁层顶模式",
        },
        {
          id: "btn3",
          val: "磁暴强度经验",
        },
        {
          id: "btn4",
          val: "磁层状态模式",
        },
        {
          id: "btn5",
          val: "开放磁通估算",
        },
        {
          id: "btn6",
          val: "弓激波模式",
        },
        {
          id: "btn7",
          val: "极尖区模式",
        },
        {
          id: "btn8",
          val: "等离子体密度反演",
        },
        {
          id: "btn9",
          val: "GIC 预测模式",
        },
        {
          id: "btn10",
          val: "磁尾扭转模式",
        },
        {
          id: "btn11",
          val: "中低纬电离层理论",
        },
        {
          id: "btn12",
          val: "局地中高层大气预报",
        },
        {
          id: "btn13",
          val: "临近空间大气环境数据同化预报",
        },
      ],
      contList: [
        {
          id: "cont0",
          val:"日冕行星际理论",
            peo:'wang',
          tell:'11111111',
          text:"读书对数"
        },
        {
          id: "cont1",
          val:'行星际激波计算',
          peo:'wang',
          tell:'2222',
          text:"读书对数"
        },
        {
          id: "cont2",
           val:'磁层顶模式',
          peo:'wang',
          tell:'33333',
          text:"读书对数"
        },
        {
          id: "cont3",
        },
        {
          id: "cont4",
        },
        {
          id: "cont5",
        },
        {
          id: "cont6",
        },
        {
          id: "cont7",
          val: "炒饭/炒饼",
        },
        {
          id: "cont8",
          val: "风味小吃",
        },
        {
          id: "cont9",
          val: "营养面食",
        },
        {
          id: "cont10",
          val: "酒水饮料",
        },
      ],
    };
  },
  methods: {
    fnNav(index, ev) {
      // 点击时不触发右边滚动监听
      this.listBoxState = false;
      // 把index赋值给now
      this.now = index;
      // 导航条
      this.Nav = this.$refs["nav"];
      // 导航条子元素
      this.NList = this.Nav.children;
      // 内容区域
      this.Content = this.$refs["content"];
      // 内容区域子元素
      this.CList = this.Content.children;
      // 内容区父元素
      this.Parent = this.Content.parentNode;
      // 判断导航条位置是否该调整
      if (this.now <= 3) {
        this.$refs["nav"].scrollTop -= 500;
      }
      if (this.now >= this.NList.length - 3) {
        this.$refs["nav"].scrollTop += 500;
      }
      // 内容区滚动的高度=子元素可视区距离顶部高度
      this.Content.scrollTop = this.CList[index].offsetTop;
      // 去除默认事件
      ev.preventDefault = ev.preventDefault();
    },
    contentScroll() {
      // 内容区域滚动高度
      this.scrollTop = this.$refs["content"].scrollTop;
      //  内容区子元素
      this.CList = this.$refs["content"].children;
      if (this.listBoxState) {
        //  循环内容区子元素
        for (var i = 0; i < this.CList.length; i++) {
          //  判断内容区域滚动高度大于当前子元素距离顶部高度就将当前值i赋给now
          if (this.scrollTop >= this.CList[i].offsetTop) {
            this.now = i;
          }
        }
        // 判断导航条位置是否该调整
        if (this.now <= 3) {
          this.$refs["nav"].scrollTop -= 500;
        }
        if (this.now >= this.NList.length - 3) {
          this.$refs["nav"].scrollTop += 500;
        }
      }
      // 打开左右联动
      if (this.scrollTop == this.CList[this.now].offsetTop) {
        this.listBoxState = true;
      }
    },
    //随机数
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
  },
  mounted() {
    // 监听滚动
    window.addEventListener("scroll", this.documentScroll);
    this.NList = this.$refs["nav"].children;
    // 内容区域子元素
    this.CList = this.$refs["content"].children;
    //  循环内容区子元素,并设置随机高度
    for (var i = 0; i < this.CList.length; i++) {
      this.CList[i].style.height = this.getRandom(150, 300) + "vh";
    }
  },
};
</script>
<style lang="scss" scoped>
.content-box {
  display: flex;
  position: relative;
  .nav {
    position: sticky;
    top: 100px;
    width: 720px;
    height: 600px;
    // background: rgb(47, 113, 255);
    overflow-y: scroll;
    .nav-list {
      display: flex;
      align-items: center;
      min-height: 10vh;
      width: 200px;
      text-align: center;
      box-sizing: border-box;
      padding: 20px;
      font-size: 18px;
    }
    .nav-list.ac {
      background: #1c75bc;
    }
    .nav-list:hover{
        background-color: #d1d3d4;
    }
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .content {
    width: 73vw;
    height: 100vh;
    // background: aqua;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
    transition: 0.3s ease-in all;
    .content-list {
      height: 100vh;
      font-size: 16px;
      text-align: center;
      transition: 0.3s ease-in all;
    }
  }
  .content::-webkit-scrollbar {
    display: none;
  }
}
</style>